<template>
     <div class="order">
         <!-- 二级订单 -->
         <h3 style="margin-left: 150px;">饿了么</h3>
         <div class="title">
             <span v-for="(item,index) in list" :key="index" class="dd">{{item}}</span>
         </div>
         <div class="block1">
            <div v-for="(item,index) in ddlist" :key="index">
               <!--   <div>
                     <img :src="item.pic" alt="">
                </div>
                
                 <div class="right">
                    
                 <span class="name">{{item.name}}</span>
                  <span >{{item.total}}</span>
                 <span>{{item.way}}</span> -->
                   <div class="first" >
                    <img  :src="item.pic" alt=""> 
                    <span class="name">{{item.name}}</span>&nbsp;
                    <span>></span>
                    <span class="songda">已送达</span>

                   </div>

                   <div class="manjian">
                       <span>10减3</span>
                       <span>25减10</span>
                   </div>
                   <div class="middle">
                    <img :src="item.pic" alt=""> 
                    <img :src="item.pic" alt=""> 
                    <span  class="total">￥{{item.total}}</span>




                   </div>
                   <div class="last">
                       <button>再来一单</button>
                   </div>


                 </div>
                 
            
            </div>
         
     </div>
</template>

<script>
var pic = 'http://p1.meituan.net/business/890e571180ec909e071952bcd293b438259355.jpg'
export default {
     data(){
         return{
             list:["全部","待消费","待评价","退款"],
             ddlist:[
                 {pic:pic,total:17.8,way:1.2,name:"纯手工饺子(凤城九路店)"},
                 {pic:pic,total:80,way:1.2,name:"唐久便利(海荣名城店)"},
                 {pic:pic,total:23.4,way:1.2,name:"美益水果(北美店)"}
             ]
         }
     },
    //  methods(){
    //     shopcart_list({status:0}).then((res)=>{
    //         this.list = res.data.list;
    //         console.log(res)
    //     })
    //  }
}
</script>

<style lang="scss" scoped>
       *{
    margin: 0;
    padding: 0;
}
    .title{
        display: flex;
        justify-content: center;
        margin: 20px 0;
        text-align: center;
    } 
    
    .title .dd{
        display: inline-block;
        flex-grow: 1;

    }
    .block1 img{
        width: 100px;
    }
    .block1>div{
        width: 100%;
        height: 150px;
        margin: 10px 0;
        display: flex;
        background-color: #f5f5f5;
        flex-direction: column;
        
        div{
             padding: 0 5px;
        }
        .last{
            button{
                float: right;
                margin-right: 8px;
                border: none;
                // border-color: skyblue;
                border: 2px solid rgb(67, 187, 235);
                padding: 3px;
                border-radius: 10px;
                color: rgb(82, 195, 239);
                font-weight: 800;
            }
            
        }
        .middle{
            img{
                width: 80px;
                border-radius: 10px;
                margin-right: 8px;
            }
            .total{
                float: right;
                margin-right: 10px;
                font-weight: 800;
            }


        }
        .manjian{
            span{
                    // padding: 2px;
                    margin-right: 10px;
            display: inline-block;
            border: 1px solid rgb(227, 63, 63);
            color:rgb(193, 72, 72) ;
            font-size: 13px;
            }
        
        }
        .first{
            
            img{
                      width: 40px;
            border-radius: 10px;
            vertical-align: middle;
            }
            .name{
                font-weight: 700;
            }
            .songda{
                float: right;
                margin-top: 5px;
            }
        }
        // img{
        //     width: 40px;
        //     border-radius: 10px;
        // }
        // .right{
        //     display: flex;
        //     flex-direction: column;
        //     .name{
        //         font-weight: 700;
        //     }
        // }
    }

</style>